<script setup>
    import { getTreeOpenListCount, getOpenList, getOpenTypeList, getOpenDetails } from '@/api/party'

    const props = defineProps({
        openItemInfo: {
            type: Object,
            default: {}
        }
    })

    let filterParams = $ref({
        pageNo: 1,
        pageSize: 20
    })

    let totalCount = $ref(0)

    let resData = $ref([])

    // 村列表
    let treeData = $ref([])
    let copyData = []
    let current = $ref(null)
    let treeLoading = $ref(false)
    const getTreeList = () => {
        treeLoading = true
        getTreeOpenListCount().then(res => {
            treeLoading = false
            copyData = res.result
            treeData = res.result
            findVillage()
        })
    }

    // 搜索村
    let keyword = $ref('')
    const treeSearch = () => {
        let data = JSON.parse(JSON.stringify(copyData))
        if(keyword){
            data = copyData.filter((item) => {
                return item.departName.indexOf(keyword) > -1
            })
        }

        treeData = data
    }

    // 从外边列表点进来的  查询所在村 和内容详情
    const findVillage = () => {
        if(props.openItemInfo && props.openItemInfo.id){
            let { openBy_dictText, id } = props.openItemInfo
            let index = treeData.findIndex((item) => {
                return item.departName = openBy_dictText
            })

            current = index
            handleClickRow(id)
        }
    }


    // 公开类型
    let typeData = $ref([])
    const getOpenType = () => {
        getOpenTypeList().then(res => {
            typeData = res.result.records
        })
    }

    // 三务公开列表
    let dataLoading = $ref(false)
    const getList = () => {
        dataLoading = true
        getOpenList(filterParams).then(res => {
            dataLoading = false
            let { records, total } = res.result
            resData = records
            totalCount = total
        })
    }

    

    const handleClick = (index, id) => {
        current = index
        filterParams.pageNo = 1
        filterParams.openBy = id
        showDetail = false
        getList()
    }


    const handleCurrentChange = (page) => {
        filterParams.pageNo = page
        getList()
    }

    const handleSizeChange = (size) => {
        filterParams.pageSize = size
        getList()
    }

    // 查询
    const handleClickSearch = () => {
        filterParams.pageNo = 1
        getList()
    }

    // 重置
    const handleClickReset = () => {
        filterParams = {
            openBy: filterParams.openBy,
            pageNo: 1,
            pageSize: 20
        }
    }

    // 显示详情
    let showDetail = $ref(false)
    let details = $ref({})
    const handleClickRow = (id) => {
        showDetail = true
        getOpenDetails({ id }).then(res => {
            details = res.result.records[0]
        })
    }
    

    const showOpenList = () => {
        getTreeList()
        getList()
        getOpenType()
    }

    showOpenList()

    const emit = defineEmits(['hideOpenList'])

    // 关闭
    const handleClickClose = () => {
        emit('hideOpenList')
    }

</script>

<template>
    <div class="open-list-box flex" v-if="showOpenList">
        <div class="left-list">
            <div class="title">徐庄镇区域列表</div>
            <div class="search flex-between">
                <input v-model="keyword" />
                <img src="../../../assets/images/search-black.png" alt="" @click="treeSearch">
            </div>

            <el-scrollbar class="list" v-loading="treeLoading">
                <div class="item" 
                    v-for="(item, index) in treeData"
                    :key="index"
                    :class="{ active: index == current }"
                    @click="handleClick(index, item.orgCode)"
                >
                    {{ item.departName }}({{ item.openNumb }})
                </div>
            </el-scrollbar>
        </div>

        <div class="right-content-wrap">
            <template v-if="!showDetail">
                <div class="top-operation flex-between">
                    <div class="top-l flex-center">
                        <div class="back" @click="handleClickClose">
                            <img src="../../../assets/images/back.png" alt="">
                            三务公开列表
                        </div>
                        <div class="search-item flex-center">
                            <el-select class="open-type" clearable v-model="filterParams.openTypeId">
                                <el-option 
                                    v-for="(item, index) in typeData" 
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                >{{item.name}}</el-option>
                            </el-select>
                            <el-input class="keyword-input" clearable v-model="filterParams.biaoti" placeholder="请输入关键词"></el-input>
                            <div class="search-btn reset" @click="handleClickReset">重置</div>
                            <div class="search-btn ml10" @click="handleClickSearch">查询</div>
                        </div>
                    </div>
                    <div class="close" @click="handleClickClose"><img src="../../../assets/images/close.png" alt=""></div>
                </div>
    
                <div class="open-info-table" v-loading="dataLoading">
                    <el-table 
                        :data="resData" 
                        style="width: 100%"
                        height="650"
                        size="large"
                        class="table"
                        ref="multipleTable"
                        @row-click="handleClickRow($event.id)"
                    >
                        <el-table-column type="index" label="序号" width="80" align="center" />
                        <el-table-column prop="biaoti" label="标题" min-width="200" />
                        <el-table-column prop="openBy_dictText" label="乡村" min-width="100" align="center" />
                        <el-table-column prop="openTypeId_dictText" label="类型" min-width="100"  align="center" />
                        <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
                        <el-table-column prop="remark" label="操作" width="140">
                            <template #default="scope">
                                <a href="javascript:;" class="details-text" @click.stop="handleClickRow(scope.row.id)">查看</a>
                            </template>
                        </el-table-column>
                    </el-table>
    
                    <el-pagination 
                        class="mt20" 
                        background 
                        layout="total, sizes, prev, pager, next" 
                        :total="totalCount" 
                        :page-size="filterParams.pageSize"
                        :current-page="filterParams.pageNo"
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                    />
                </div>
            </template>

            <template v-else>
                <div class="top-operation flex-between">
                    <div class="top-l flex-center">
                        <div class="back" @click="showDetail = false">
                            <img src="../../../assets/images/back.png" alt="">
                            三务公开详情
                        </div>
                    </div>
                    <div class="close" @click="handleClickClose"><img src="../../../assets/images/close.png" alt=""></div>
                </div>

                <el-scrollbar class="details-wrap">
                    <div class="title">{{ details.biaoti }}</div>
                    <div class="desc">
                        <span>{{ details.openTypeId_dictText }}</span>
                        <span>{{ details.openTime }}</span>
                    </div>
                    <div class="content" v-html="details.content"></div>
                </el-scrollbar>
            </template>

        </div>
    </div>
</template>

<style lang="less">
    .open-list-box{
        position: fixed;
        top: 124px;
        left: 40px;
        bottom: 124px;
        right: 40px;
        z-index: 999999;
        // margin: 124px 40px;

        .left-list{
            height: 100%;
            width: 276px;
            background: #2E62C5 url('../../../assets/images/villageList.png') center no-repeat;
            padding: 40px 25px;

            .title{
                text-align: center;
                font-size: 22px;
                color: #333333;
                padding-bottom: 15px;
            }

            .search{
                width: 100%;
                height: 40px;
                border-radius: 4px;
                border: 1px solid #333;
                padding: 0 15px;

                input{
                    width: 160px;
                    height: 38px;
                    border: none;
                    margin-right: 15px;
                }

                img{
                    width: 22px;
                    height: 22px;
                    cursor: pointer;
                }
            }

            .list{
                height: 680px;
                padding: 14px 20px;
                overflow: hidden;

                .item{
                    font-size: 18px;
                    padding: 10px 0;
                    color: #333;
                    cursor: pointer;

                    &:hover, &.active{
                        color: #0E6DE9;
                    }
                }
            }
        }

        .right-content-wrap{
            flex: 1;
            margin-left: 18px;
            background: rgba(255,255,255,0.95);
            padding: 22px 20px;
            color: #333;

            .top-operation {
                .back{
                    padding: 0 45px 0 22px;
                    font-size: 22px;
                    cursor: pointer;

                    img{
                        width: 23px;
                        height: 21px;
                        margin-right: 7px;
                    }
                }

                .search-item{
                    .open-type{
                        width: 125px;
                        margin-right: 10px;
                    }

                    .el-input .el-input__wrapper{
                        color: #333;
                    }

                    .el-input__inner{
                        color: #333 !important;
                    }

                    .keyword-input{
                        width: 215px;
                        margin-right: 10px;
                    }

                    .search-btn{
                        width: 55px;
                        height: 32px;
                        line-height: 30px;
                        text-align: center;
                        background: #0E6DE9;
                        border: 1px solid #0E6DE9;
                        border-radius: 4px;
                        color: #fff;
                        font-size: 16px;
                        cursor: pointer;

                        &.reset{
                            color: #0E6DE9;
                            background: #fff;
                        }
                    }
                }

                .close{
                    cursor: pointer;
                }
            }

            .open-info-table{
                margin-top: 40px;

                .details-text{
                    color: #333;

                    &:hover{
                        color: #0E6DE9;
                    }
                }
                .table thead{
                    background: transparent;
                    color: #666666;
                    font-size: 18px;
                }

                .table.el-table, .table.el-table tr, .table.el-table th, .table.el-table td{
                    background: transparent;
                    border: none;
                    color: #333333;
                    font-size: 16px;
                }
                
                .table.el-table--enable-row-hover .el-table__body tr:hover{
                    background: rgba(14,109,233,0.1);
                    border: 1px solid #0E6DE9;
                    box-shadow: inset 0px 0px 1px 1px #0E6DE9;

                    &>td.el-table__cell{
                        background: transparent
                    }

                    .details-text{
                        color: #0E6DE9;
                    }
                }

                .table.el-table td.el-table__cell, .table.el-table th.el-table__cell.is-leaf{
                    border: none;
                    background: transparent;
                }

                .table .el-table__inner-wrapper::before{
                    height: 0;
                }

                .table.el-table--large .cell{
                    padding: 0 5px;
                    cursor: pointer;
                }

                .el-pagination {
                    display: flex;
                    justify-content: center;

                    .el-input__inner{
                        color: #333 !important;
                    }
                }

                .el-pagination__total{
                    color: #333 !important;
                }
            }

            .details-wrap{
                color: #333;
                height: 740px;
                overflow: hidden;
                padding: 0 30px;
                
                .title{
                    font-size: 26px;
                    font-weight: bold;
                    padding: 25px 0;
                    text-align: center;
                }

                .desc{
                    text-align: right;

                    span{
                        margin-left: 10px;
                        font-size: 14px;
                        color: #999
                    }
                }

                .content{
                    padding-top: 30px;
                    font-size: 16px;
                    line-height: 22px;
                }
            }

        }
    }
</style>